<template>
    <div class="page-newhand">
        <div class="header" @click="jumpTest">
          <img :src="img1">
          <div class="act-time">活动时间：2017年12月01日 - 2018年03月31日</div>
        </div>
        <div class="mian">
            <div class="item">
                <div class="title">一重礼</div>
                <div class="con"><span class="spec-txt">2088</span> 元礼包 +<span class="spec-txt">2%</span> 加息券</div>
                <div class="btn" :class="{'active': (taskstatus.noviceStatus == -1 || taskstatus.noviceStatus == 0),'hasgain': taskstatus.noviceStatus == 1 || taskstatus.noviceStatus == 2 }" ref="btn_receive" @click="jump('jumpToLogin',taskstatus.noviceStatus,1)">{{ txtshow(taskstatus.noviceStatus,1) }}</div>
            </div>
            <div class="item">
                <div class="title">二重礼</div>
                <div class="con">绑定银行卡即送 <span class="spec-txt">18888</span> 元体验金</div>
                <div class="btn" :class="{'active': (taskstatus.bankStatus == -1 || taskstatus.bankStatus == 0),'hasgain': taskstatus.bankStatus == 1 || taskstatus.bankStatus == 2 }" ref="btn_tiedcard" @click="jump('jumpToAddBankCard',taskstatus.bankStatus,2)">{{ txtshow(taskstatus.bankStatus,2) }}</div>
            </div>
            <div class="item">
                <div class="title">三重礼</div>
                <div class="con">新用户专享标 <span class="spec-txt">15%</span> 年化收益</div>
                <div class="btn" :class="{'active': (taskstatus.partStatus == -1 || taskstatus.partStatus == 0 ),'hasgain': taskstatus.partStatus == 1 || taskstatus.partStatus == 2 }" ref="btn_invest" @click="jump('jumpToProductList',taskstatus.partStatus,3)">{{ txtshow(taskstatus.partStatus,3) }}</div>
            </div>
        </div>
        <div class="footer">
            <h1>活动规则</h1>
            <P>1、活动对象：优选金融所有用户；</P>
            <P>2、本新手活动限2017年12月01日后新注册用户参与；</P>
            <P>3、新用户专项标仅限首次投资使用。</P>
            <div class="f-tips"><span class="f-ad" style="border-width: 1px;">广告</span> 理财有风险，投资需谨慎</div>
        </div>
    </div>
</template>

<script>
import { Popup, Toast } from "mint-ui";
export default {
  name: "aboutUs",
  data() {
    return {
      img1: require("@/public/imgs/newhand/img-header.jpg"),
      popupVisible: false, // 注册弹出框
      popupVisible1: false, // 绑定银行卡弹出框
      isLogin: false, //是否登录
      sessionid: "",
      taskstatus: {
        //任务状态,
        noviceStatus: 0, // 注册任务
        bankStatus: 0, // 绑定银行卡
        partStatus: 0 // 新手标的
      },
      returnData: {},
      wincon1: [
        {
          rednumber: 10,
          unit: "元",
          rule: "满1千元≥30天可用"
        },
        {
          rednumber: 18,
          unit: "元",
          rule: "满5千元≥30天可用"
        },
        {
          rednumber: 38,
          unit: "元",
          rule: "满1万元≥30天可用"
        },
        {
          rednumber: 78,
          unit: "元",
          rule: "满2万元≥30天可用"
        },
        {
          rednumber: 108,
          unit: "元",
          rule: "满1万元≥90天可用"
        },
        {
          rednumber: 228,
          unit: "元",
          rule: "满5万元≥30天可用"
        },
        {
          rednumber: 238,
          unit: "元",
          rule: "满2万元≥90天可用"
        },
        {
          rednumber: 600,
          unit: "元",
          rule: "满5万元≥90天可用"
        },
        {
          rednumber: 680,
          unit: "元",
          rule: "满6万元≥90天可用"
        },
        {
          rednumber: 2,
          unit: "%",
          rule: "加息券 无门槛使用"
        }
      ]
    };
  },
  created() {
    this.loginStatus();
    this.getUserTaskStatus();
  },
  methods: {
    jumpTest() {
      this.Uitis.JumpNavite("jumpToAddBankCard");
    },
    // 判断用户是否登录
    loginStatus() {
      this.Uitis.getInfo().then(res => {
        //alert(JSON.stringify(res));
        if (res.uId == "") {
          this.isLogin = false;
        } else {
          this.isLogin = true;
        }
      });
    },
    // 跳转到相应的页面
    jump(url, status, type) {
      //alert()
      if (this.isLogin == false) {
        //没登录跳登录
        this.Uitis.Login();
      } else if (status == -1) {
        //没资格
        Toast({
          message: "对不起！您没有参加资格。",
          position: "top",
          duration: 2000
        });
      } else if (status == 0) {
        //未完成 跳转
        if (type == 1) {
          Toast("网络异常，请刷新后重试~");
        } else {
          this.Uitis.JumpNavite(url);
        }
      } else if (status == 1 || status == 2) {
        //已完成 自动发放
      }
    },
    // 获取用户相应奖品的领取状态
    getUserTaskStatus() {
      var self = this;
      var GetInfo = this.Uitis.getInfo();

      GetInfo.then(res => {
        if (res.uId != "") {
          // return;
          this.sessionid = res.sessionid;

          this.$http
            .post(this.Interface.getTaskStatus, {
              sessionid: res.sessionid
            })
            .then(response => {
              // alert("response:" + JSON.stringify(response));
              var result = response.data;
              if (result.success) {
                this.taskstatus = result.data;
              }
            })
            .catch(res => {
              console.log("请求失败" + res.status);
            });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 每个按钮根据状态显示文字
    txtshow(status, type) {
      if (type == 1) {
        if (status == -1 || status == 0) {
          return "立即领取";
        } else if (status == 1 || status == 2) {
          return "已领取";
        }
      } else if (type == 2) {
        if (status == 0 || status == -1) {
          return "去绑卡";
        } else if (status == 1 || status == 2) {
          return "已绑卡";
        }
      } else if (type == 3) {
        if (status == 0 || status == -1) {
          return "去投资";
        } else if (status == 1 || status == 2) {
          return "已投资";
        }
      }
    },
    toGift() {
      this.Uitis.JumpNavite("jumpToCoupon");
    },
    popupClose() {
      this.popupVisible = false;
      this.popupVisible1 = false;
    }
  }
};
</script>

<style lang="less" scoped>
.page-newhand {
  background-color: #0e1943;
  .header {
    position: ralative;
    .act-time {
      position: absolute;
      left: 0;
      top: 345px;
      width: 100%;
      text-align: center;
      color: #d79869;
      font-size: 16px;
    }
  }
  .mian {
    position: relative;
    margin-top: -220px;
    .item {
      width: 100%;
      height: 387px;
      position: relative;
      background: url(../../public/imgs/newhand/img-item-bg.png) no-repeat
        center bottom/100%;
      background-size: 750px 387px;
      .title {
        font-size: 28px;
        color: #fbe7a3;
        text-align: center;
        padding-top: 50px;
      }
      .con {
        font-size: 36px;
        color: #f6ecd3;
        padding-top: 45px;
        text-align: center;
        .spec-txt {
          font-size: 60px;
          color: #fbe7a3;
        }
      }
      .btn {
        width: 345px;
        height: 137px;
        line-height: 137px;
        text-align: center;
        margin: 10px auto;
        font-size: 30px;
        &.active {
          background: url(../../public/imgs/newhand/nhimg-btn-bg.png) no-repeat
            center center;
          background-size: 345px 137px;
          color: #a84040;
        }
        &.hasgain {
          background: url(../../public/imgs/newhand/btn_hasgain.png) no-repeat
            center center;
          background-size: 345px 137px;
          color: #f9db97;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 606px;
    margin-top: -300px;
    background: url(../../public/imgs/newhand/img-bottom-bg.png) no-repeat
      center bottom;
    background-size: 750px 606px;
    padding: 316px 30px 0;
    box-sizing: border-box;
    color: #d28698;
    line-height: 1.7;
    h1 {
      font-size: 28px;
    }
    p {
      font-size: 24px;
    }
    .f-tips {
      text-align: center;
      margin-top: 40px;
      font-size: 16px;
      .f-ad {
        display: inline-block;
        border: 1px solid #d28698;
        line-height: 1;
        padding: 3px 5px;
        border-radius: 3px;
      }
    }
  }
  .popup-1,
  .popup-2 {
    min-height: 300px;
    background: rgba(255, 255, 255, 0);
    .title {
      font-size: 44px;
      color: #fff;
      padding: 60px 0;
      text-align: center;
    }
    .btn-jump {
      width: 345px;
      height: 137px;
      line-height: 137px;
      font-size: 30px;
      color: #fff;
      margin: 0 auto;
      padding: 12px auto;
      text-align: center;
      background: url(../../public/imgs/newhand/btn_jump.png) no-repeat center
        center;
      background-size: 345px 137px;
    }
    .popup-close {
      width: 68px;
      height: 68px;
      margin: 54px auto;
    }
  }
  .popup-1-con {
    width: 690px;
    background-color: #ff3333;
    border-radius: 10px;
    .win-con {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .items {
        width: 190px;
        height: 90px;
        margin-bottom: 25px;
        margin-right: 20px;
        border-radius: 6px;
        color: #a84040;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: linear-gradient(#fcebb0, #ed9649);
        box-shadow: 0 5px 0 #faab39;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:last-child {
          margin-right: 0;
        }
        span {
          font-size: 44px;
        }
      }
    }
  }
  .popup-2-con {
    width: 560px;
    background-color: #ff3333;
    border-radius: 10px;
    .win-con {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 420px;
      height: 190px;
      margin: 0 auto;
      margin-bottom: 25px;
      border-radius: 6px;
      background: url(../../public/imgs/newhand/btn_reg_win.png) no-repeat
        center center;
      box-shadow: 0 5px 0 #faab39;
      .item {
        color: #a84040;
        font-size: 22px;
        line-height: 1.2;
        span {
          font-size: 60px;
        }
      }
    }
  }
}
</style>
